import React, { memo, useState, useEffect } from 'react'
import router from '../../router'
import { Route, Link, NavLink, withRouter, Switch, Redirect } from "react-router-dom"
import { root_left, root_right, root_in, root_left_nav } from './left.module.css'

export default memo(function Left() {
    const [index, setIndex] = useState(0)
    return (
        < div className={root_in} >
            <div className={root_left}>
                {
                    router.map((item, i) =>
                        <NavLink
                            className={i === index ? root_left_nav : ''}
                            onClick={() => {
                                setIndex(i)
                            }}
                            key={item.path}
                            to={item.path}>
                            {item.til}
                        </NavLink>
                    )
                }

            </div>
            <div className={root_right}>
                {
                    router.map(item => <Route
                        key={item.path}
                        path={item.path}
                        exact={item.isExact}
                        component={item.component} ></Route>)
                }
            </div>
        </div >
    )
})
